<script setup lang="ts">
import { computed, provide } from 'vue';
import type { TuiRowProps, TuiBreakpointProps } from './types';

// 设置默认值
const props = withDefaults(defineProps<TuiRowProps>(), {
  gutter: 0,
  justify: 'start',
  align: 'top',
  tag: 'div'
});

// 计算Row类名
const rowClass = computed(() => {
  const classes = ['tui-row'];
  
  if (props.justify !== 'start') {
    classes.push(`tui-row--justify-${props.justify}`);
  }
  
  if (props.align !== 'top') {
    classes.push(`tui-row--align-${props.align}`);
  }
  
  return classes;
});

// 计算Row样式
const rowStyle = computed(() => {
  return {
    marginLeft: props.gutter ? `-${props.gutter / 2}px` : undefined,
    marginRight: props.gutter ? `-${props.gutter / 2}px` : undefined
  };
});

// 提供gutter属性给子组件
provide('tui-row-gutter', props.gutter);
</script>

<template>
  <component :is="props.tag" :class="rowClass" :style="rowStyle">
    <slot></slot>
  </component>
</template>

<style lang="scss" scoped>
.tui-row {
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-bottom: 20px;
  
  &--justify-center {
    justify-content: center;
  }
  
  &--justify-end {
    justify-content: flex-end;
  }
  
  &--justify-space-between {
    justify-content: space-between;
  }
  
  &--justify-space-around {
    justify-content: space-around;
  }
  
  &--justify-space-evenly {
    justify-content: space-evenly;
  }
  
  &--align-middle {
    align-items: center;
  }
  
  &--align-bottom {
    align-items: flex-end;
  }
}
</style>